import { Component, ReactNode } from "react";

export default class App extends Component {
  state = {
    gift: "小汽车",
  };
  render(): ReactNode {
    return (
      <>
        <h1>当前是APP组件内容</h1>
        <button
          onClick={() => {
            this.setState({
              gift: "剃须刀",
            });
          }}
        >
          点击app按钮给father组件送别的礼物
        </button>
        <hr />
        <Father name="我是父亲" gift={this.state.gift}></Father>
        {/* <Child></Child> */}
      </>
    );
  }
}

interface ChildProps {
  gift: string;
  is:boolean;
}
function Child(props: ChildProps) {
  return (
    <>
      <div className="Child">这是儿子-----{props.is ? props.gift : '暂无礼物'}</div>

    </>
  );
}
//函数组件的写法
// function Father() {
//   const [gift, setGift] = useState("第一次给的礼物");
//   const [is, setIs] = useState(false);

//   return (
//     <>
//       <div>这是父亲组件，礼物是：{gift}</div>
//       <button onClick={() => setIs(!is)}>切换 is</button>
//       <Child gift={gift} is={is} />
//     </>
//   );
// }


class Father extends Component {
    props={
        name:'默认值',
        gift:'默认值'
    }
    //函数组件中不能直接使用 state，但可以通过 useState Hook 来实现状态的定义和更新。
    state={
        gift:'第一次给的礼物',
        is:false
    }
  // 接收参数
  render(): ReactNode {
    return (
      <>
        <div className="Father">这是{this.props.name}---来自app的礼物是{this.props.gift}</div>
        <button onClick={()=>{
            this.setState({
                is:!this.state.is
            })
        }}>选择给儿子礼物改变is</button>
        <hr />
        <Child gift={this.state.gift} is={this.state.is}></Child>
      </>
    );
  }
}
